<template>
  <div class="nav card">
    <div class="container">
      <div class="item">
        <img style="width:26px;height:26px;margin-top:-2px;"
          src="https://cdn.learnku.com/uploads/images/201908/11/22816/hE6OwOXyZJ.png!/both/44x44" />
      </div>

      <router-link class="item" v-for="(item, i) in navList" :key="i" :to="item.to">{{ item.title }}</router-link>

      <div class="right" style="display:flex">
        <a class="item" href="">注册</a>
        <span class="item" @click="showModal" href="">登陆</span>
      </div>
    </div>

    <div class="modal">
      <a-modal title="用户登录" :visible="visible" @ok="handleOk" :confirmLoading="confirmLoading" @cancel="handleCancel"
        width="460px">
        <div>
          <div class="input-group">

            <!-- <a-input placeholder="输入您的账号" v-model="userName" ref="userNameInput" size="large">
                  <a-icon slot="prefix" type="user" />
                  <a-tooltip slot="suffix" title="输入您的账号">
                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                  </a-tooltip>
                </a-input>
                <br/><br/>
                <a-input placeholder="请输入密码" v-model="password" ref="userNameInput" size="large">
                  <a-icon slot="prefix" type="user" />
                  <a-tooltip slot="suffix" title="输入您的密码">
                    <a-icon type="info-circle" style="color: rgba(0,0,0,.45)" />
                  </a-tooltip>
                </a-input> -->
            <!-- <div style="display:flex">
              <a-button> 提交 </a-button>
              <span stsyle=""> </span>
            </div> -->
          </div>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
</script>
<style lang="less" scoped>
.nav {
  width: "100%";
  border-top: 4px solid #00b5ad !important;
  margin-bottom: 40px;

  .container {
    border-color: #e7e7e7;
    background-color: #fff;
    height: 47.2px;
    width: 1200px;
    margin-left: auto !important;
    margin-right: auto !important;
    display: flex;

    .item {
      color: #777;
      display: flex;
      // position: relative;
      // vertical-align: middle;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center;
      text-decoration: none;
      -webkit-tap-highlight-color: transparent;
      -webkit-box-flex: 0;
      -ms-flex: 0 0 auto;
      flex: 0 0 auto;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      padding: 1em 1em;
      text-transform: none;
      transition: background .1s ease, box-shadow .1s ease, color .1s ease, -webkit-box-shadow .1s ease;
      transition-property: background, box-shadow, color, box-shadow;
      transition-duration: 0.1s, 0.1s, 0.1s, 0.1s;
      transition-timing-function: ease, ease, ease, ease;
      transition-delay: 0s, 0s, 0s, 0s;
    }

    .item:hover {
      color: rgba(0, 0, 0, .87);
      background: rgba(34, 36, 38, .1);
    }

    .right {
      margin-left: auto;
    }
  }
}

/* 导航条响应式 */
@media screen and (max-width: 1200px) {
  .nav .container {
    width: 933px;
  }
}

//弹出框样式
</style>
